<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-if="showSearch" class="mb-[10px]">
        <el-card shadow="hover">
          <el-form ref="queryFormRef" class="relative" :model="queryParams" :inline="true">
            <el-form-item label="支付平台" prop="payTypeId">
              <el-select v-model="queryParams.payTypeId" clearable @change="changePayType">
                <el-option v-for="item in payList" :value="item.typeId" :label="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="A端订单号" prop="orderAid">
              <el-input v-model="queryParams.orderAid" placeholder="请输入A端订单号" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="B端订单号" prop="orderNo">
              <el-input v-model="queryParams.orderNo" placeholder="请输入B端订单号" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="C端订单号" prop="orderId">
              <el-input v-model="queryParams.orderId" placeholder="请输入订单ID" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="平台订单号" prop="orderCid">
              <el-input v-model="queryParams.orderCid" placeholder="请输入平台订单号" clearable @keyup.enter="handleQuery" />
            </el-form-item>

            <el-form-item label="应用ID" v-if="!isSupplier" prop="appId">
              <el-select v-model="queryParams.appId" filterable clearable style="width: 240px">
                <el-option v-for="item in appList" :label="item.appId" :value="item.appId"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="isAdmin" label="代理名称" prop="agentName">
              <el-input v-model="queryParams.agentName" placeholder="请输入代理名称" clearable @keyup.enter="handleQuery" />
            </el-form-item>

            <el-form-item label="经理名称" prop="managerId" v-if="isAdmin || isAgent">
              <el-select v-model="queryParams.managerId" filterable clearable style="width: 240px">
                <el-option v-for="item in managerList" :label="item.userName" :value="item.userId"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="商户名称" prop="clientId" v-if="!isClient && !isSupplier">
              <el-select v-model="queryParams.clientId" filterable clearable style="width: 240px">
                <el-option v-for="item in clientList" :label="item.userName" :value="item.userId"></el-option>
              </el-select>
            </el-form-item>

            <accoutSelect v-model="customAccountIds" :isClient="isClient" v-hasPermi="['pay:payOrder:accountName']" />

            <el-form-item label="支付状态" prop="status">
              <el-select v-model="queryParams.status" placeholder="请选择支付状态" clearable>
                <el-option v-for="dict in orderStatus" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="退款状态" prop="refundStatus">
              <el-select v-model="queryParams.refundStatus" placeholder="请选择退款状态" clearable>
                <el-option v-for="dict in refund_status" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="争议状态" prop="disputeStatus">
              <el-select v-model="queryParams.disputeStatus" placeholder="请选择争议状态" clearable>
                <el-option v-for="dict in disputes_status" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="物流状态" prop="trackStatus">
              <el-select v-model="queryParams.trackStatus" placeholder="请选择物流状态" clearable>
                <el-option v-for="dict in logistics_status" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="物流单号" prop="trackNo">
              <el-input v-model="queryParams.trackNo" placeholder="请输入物流单号" clearable @keyup.enter="handleQuery" />
            </el-form-item>

            <el-form-item label="订单类型" prop="orderType">
              <el-select v-model="queryParams.orderType" placeholder="请选择订单类型" clearable>
                <el-option v-for="dict in order_type" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="商品类型" prop="goodsType">
              <el-select v-model="queryParams.goodsType" clearable>
                <el-option v-for="dict in product_type" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="支付邮件状态" prop="payEmail" v-if="!isClient">
              <el-select v-model="queryParams.payEmail" placeholder="请选择支付邮件状态" clearable>
                <el-option label="未发送" value="0"></el-option>
                <el-option label="已发送" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="物流邮件状态" prop="trackEmail" v-if="!isClient">
              <el-select v-model="queryParams.trackEmail" placeholder="请选择物流邮件状态" clearable>
                <el-option label="未发送" value="0"></el-option>
                <el-option label="已发送" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-hasPermi="['admin:order:take']" v-if="shwoEat" label="是否吃单" prop="isFeign">
              <el-select v-model="queryParams.isFeign" placeholder="请选择是否吃单" clearable>
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="收款账号" prop="accountId" v-hasPermi="['pay:payOrder:accountName']">
              <el-select v-model="customAccountIds" filterable clearable placeholder="请填写收款账号" multiple style="width: 240px">
                <el-option v-for="item in accountList" :label="item.accountName" :key="item.accountId" :value="item.accountId"></el-option>
              </el-select>
            </el-form-item> -->

            <el-form-item label="轮询组" prop="groupIdsCopy" v-if="!isClient">
              <el-select v-model="queryParams.groupIdsCopy" filterable multiple clearable style="width: 240px">
                <el-option v-for="item in groupList" :label="item.groupName" :value="item.groupId"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="订单备注" prop="remark">
              <el-input v-model="queryParams.remark" placeholder="请输入订单备注" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="收款平台备注" prop="groupTypeRemark" v-if="!isClient">
              <el-input v-model="queryParams.groupTypeRemark" placeholder="请输入收款平台备注" clearable @keyup.enter="handleQuery" />
            </el-form-item>

            <el-form-item label="来源域名" prop="fromDomain">
              <el-input v-model="queryParams.fromDomain" placeholder="请输入来源域名" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="来源IP" prop="formIp">
              <el-input v-model="queryParams.formIp" placeholder="请输入来源IP" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="客户电话" prop="customerPhone">
              <el-input v-model="queryParams.customerPhone" placeholder="请输入客户电话" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="客户邮箱" prop="customerEmail">
              <el-input v-model="queryParams.customerEmail" placeholder="请输入客户邮箱" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="系统美元区间" style="margin-right: 64px">
              <div class="flex gap-3 w-fit">
                <el-input v-model="queryParams.params['minMoney']" style="width: 80px" placeholder="最小金额" clearable @keyup.enter="handleQuery" />
                <span>-</span>
                <el-input v-model="queryParams.params['maxMoney']" style="width: 80px" placeholder="最大金额" clearable @keyup.enter="handleQuery" />
              </div>
            </el-form-item>
            <el-form-item label="创建时间" style="width: 308px">
              <el-date-picker
                v-model="dateRangeCreateTime"
                value-format="YYYY-MM-DD HH:mm:ss"
                type="datetimerange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
              />
            </el-form-item>
            <el-form-item label="支付时间" style="width: 308px">
              <el-date-picker
                v-model="dateRangeUpdateTime"
                value-format="YYYY-MM-DD HH:mm:ss"
                type="datetimerange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="Search"
                @click="
                  handleQuery();
                  getOrderStatisticians();
                "
                >搜索</el-button
              >
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
          <div class="flex gap-20 items-center">
            <div class="flex flex-col">
              <div class="flex gap-2 items-center" v-if="!isSupplier">
                <span class="text-14px text-[#606266] font-bold">支付笔数/金额</span>
                <span v-if="isStaticShow" class="text-center flex-1 text-[15px]"
                  >{{ orderStatisticians.successCount }} 笔 / USD {{ orderStatisticians.successTotal }}</span
                >
                <span class="text-center flex-1 text-[15px]" v-else>XX/XX</span>
              </div>
              <div class="flex gap-2 items-center">
                <span class="text-14px text-[#606266] font-bold">退款笔数/金额</span>
                <span v-if="isStaticShow" class="text-center flex-1 text-[15px]"
                  >{{ orderStatisticians.refundCount }} 笔 / USD {{ orderStatisticians.refundTotal }}</span
                >
                <span class="text-center flex-1 text-[15px]" v-else>XX/XX</span>
              </div>
            </div>
            <div class="flex flex-col" v-if="!isClient">
              <div class="flex gap-2 items-center">
                <span class="text-14px text-[#606266] font-bold">结算笔数/金额</span>
                <span v-if="isStaticShow" class="text-center flex-1 text-[15px]"
                  >{{ orderStatisticians.settCount }} 笔 / USD {{ orderStatisticians.settTotal }}</span
                >
                <span class="text-center flex-1 text-[15px]" v-else>XX/XX</span>
              </div>
              <div class="flex gap-2 items-center" v-if="shwoEat">
                <span class="text-14px text-[#606266] font-bold">吃单笔数/金额</span>
                <span v-if="isStaticShow" class="text-center flex-1 text-[15px]"
                  >{{ orderStatisticians.eatCount }} 笔 / USD {{ orderStatisticians.eatTotal }}</span
                >
                <span class="text-center flex-1 text-[15px]" v-else>XX/XX</span>
              </div>
            </div>

            <div class="flex flex-col" v-hasPermi="['commission:*:*']">
              <div class="flex gap-2 items-center" v-if="isAdmin || isAgent">
                <span class="text-14px text-[#606266] font-bold">管理员佣金</span>
                <span v-if="isStaticShow" class="flex-1 text-[15px]">{{ orderStatisticians.agentCommission }} USD</span>
                <span class="text-center flex-1 text-[15px]" v-else>XX/XX</span>
              </div>
              <div class="flex gap-2 items-center">
                <span class="text-14px text-[#606266] font-bold"> 商户佣金</span>
                <span v-if="isStaticShow" class="flex-1 text-[15px]">{{ orderStatisticians.clientCommission }} USD</span>
                <span class="text-center flex-1 text-[15px]" v-else>XX/XX</span>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </transition>

    <el-tooltip :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
      <div ref="searchIcon" class="search_icon" :class="showSearch ? 'show' : 'hide'" @click="showSearch = !showSearch">
        <svg-icon icon-class="commencement"></svg-icon>
      </div>
    </el-tooltip>

    <div class="flex justify-between items-center my-5">
      <div class="flex gap-3">
        <el-button v-hasPermi="['system:PayOrder:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
          >删除</el-button
        >
        <el-button v-hasPermi="['system:PayOrder:export']" style="margin: 0" type="warning" plain icon="Download" @click="openExport">导出</el-button>

        <div v-hasPermi="['system:logistical:save']" class="flex gap-3">
          <logisticsInfo :pay-list="payList" @success="getList" />
        </div>

        <el-button v-hasPermi="['system:PayOrder:syncOrder']" type="info" plain icon="Switch" @click="handleAync">同步ES数据</el-button>
      </div>

      <div class="flex items-center w-fit gap-5">
        <right-toolbar v-model:showSearch="showSearch" :show-search-btn="false" @query-table="getList"></right-toolbar>
      </div>
    </div>
    <el-table
      v-loading="loading"
      :data="PayOrderList"
      @selection-change="handleSelectionChange"
      :row-class-name="rowClassName"
      :default-expand-all="true"
    >
      <el-table-column type="expand" width="1">
        <template #default="{ row }">
          <div class="pl-[40px] bg-white mt-[-1px] w-[100%] border-b border-b-solid border-[#ebeef5] leading-[26px]" v-if="showExpand(row)">
            <div>订单备注：{{ row.remark }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column type="selection" width="30" align="center" />
      <el-table-column v-if="!isClient" v-hasPermi="['pay:payOrder:trader']" label="所属商户" align="center">
        <template #default="{ row }">
          <div class="flex flex-col items-center leading-[1.1] justify-center">
            <el-tooltip class="box-item" effect="dark" :content="'代理名称:' + row.agentName" v-if="isAdmin" placement="right">
              <el-link class="truncate overflow-hidden max-w-[100%]" :underline="false" @click="copyText(row.agentName, '代理名称')">{{
                row.agentName
              }}</el-link>
            </el-tooltip>

            <el-icon v-if="row.agentName && isAdmin"><ArrowDown /></el-icon>

            <el-tooltip class="box-item" effect="dark" :content="'商户名称:' + row.clientName" placement="right">
              <el-link class="truncate overflow-hidden max-w-[100%]" :underline="false" @click="copyText(row.clientName, '商户名称')">{{
                row.clientName
              }}</el-link>
            </el-tooltip>

            <el-icon v-if="row.clientName"><ArrowDown /></el-icon>
            <el-link class="truncate overflow-hidden max-w-[100%]" :underline="false" @click="copyText(row.appId, '应用ID')">{{ row.appId }}</el-link>
          </div>
        </template>
      </el-table-column>

      <el-table-column v-else label="APP ID" align="center">
        <template #default="{ row }">
          <div class="flex flex-col items-center leading-[0.8] justify-center">
            <el-link class="truncate overflow-hidden max-w-[100%]" :underline="false" @click="copyText(row.appId, '应用ID')">{{ row.appId }}</el-link>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="订单号" width="200">
        <template #default="{ row }">
          <div class="flex flex-col items-start overflow-hidden w-[100%] leading-[1.2] text-[12px]">
            <el-tooltip class="box-item" effect="dark" :content="'A端订单号:' + row.orderAid" placement="right">
              <el-link class="truncate overflow-hidden max-w-[100%]" :underline="false" @click="copyText(row.orderAid, 'A端订单号')">{{
                row.orderAid
              }}</el-link>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" :content="'B端订单号:' + row.orderNo" placement="right">
              <el-link class="truncate overflow-hidden max-w-[100%]" :underline="false" @click="copyText(row.orderNo, 'B端订单号')">{{
                row.orderNo
              }}</el-link>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" :content="'C端订单号:' + row.orderId" placement="right">
              <el-link class="truncate overflow-hidden max-w-[100%]" :underline="false" @click="copyText(row.orderId, 'C端订单号')">{{
                row.orderId
              }}</el-link>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" :content="'平台订单号:' + row.orderCid" placement="right">
              <el-link class="truncate overflow-hidden max-w-[100%]" :underline="false" @click="copyText(row.orderCid, '平台订单号')">{{
                row.orderCid
              }}</el-link>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="订单金额" min-width="180">
        <template #default="{ row }">
          <div class="flex flex-col items-start">
            <div>
              <span>A端金额： {{ row.amoney }}</span> <span>{{ row.currency }}</span>
            </div>
            <el-tooltip class="box-item" effect="dark" :content="'原始金额: ' + row.ausdMoney + 'USD'" placement="right">
              <div :class="row.usdMoney != row.ausdMoney ? 'text-[red]' : ''">
                <span>系统美元：{{ row.usdMoney }} </span> <span>USD</span>
              </div>
            </el-tooltip>
            <div>
              <span>强转金额：{{ row.forceMoney }} </span> <span>{{ row.forceCurrency }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" width="100" align="center">
        <template #default="{ row }">
          <div class="flex flex-col gap-1 items-center">
            <dict-tag :options="orderStatus" :value="row.status" />

            <el-tooltip v-if="row.refundStatus == 2 && row.refundMoney" class="box-item" effect="dark" :content="row.refundMoney" placement="top">
              <dict-tag :options="refund_status" :value="row.refundStatus" />
            </el-tooltip>
            <dict-tag :options="refund_status" v-else :value="row.refundStatus" />

            <el-tooltip v-if="row.disputeRemark" class="box-item" effect="dark" :content="row.disputeRemark" placement="right">
              <div class="w-fit relative flex items-center">
                <dict-tag :options="disputes_status" :value="row.disputeStatus" />
                <svg
                  t="1729674430243"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="14765"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="22"
                  height="22"
                  style="position: absolute; right: 0; top: 0; transform: translateX(50%) translateY(-50%)"
                  fill="#777"
                >
                  <path
                    d="M113.777778 170.666667h796.444444a56.888889 56.888889 0 0 1 56.888889 56.888889v533.361777a56.888889 56.888889 0 0 1-56.888889 56.888889H427.861333l-185.969777 118.129778a28.444444 28.444444 0 0 1-43.690667-24.007111V817.777778H113.777778a56.888889 56.888889 0 0 1-56.888889-56.888889V227.555556a56.888889 56.888889 0 0 1 56.888889-56.888889z m163.555555 284.444444c-14.222222 0.512-26.083556 5.489778-35.555555 14.904889-9.472 9.386667-14.222222 21.162667-14.222222 35.271111s4.750222 25.884444 14.222222 35.271111c9.472 9.386667 21.333333 14.108444 35.555555 14.108445s26.083556-4.693333 35.555556-14.108445c9.472-9.386667 14.222222-21.162667 14.222222-35.271111s-4.750222-25.884444-14.222222-35.271111c-9.472-9.415111-21.333333-14.392889-35.555556-14.904889z m227.555556 0c-14.222222 0.512-26.083556 5.489778-35.555556 14.904889-9.472 9.386667-14.222222 21.162667-14.222222 35.271111s4.750222 25.884444 14.222222 35.271111c9.472 9.386667 21.333333 14.108444 35.555556 14.108445s26.083556-4.693333 35.555555-14.108445c9.472-9.386667 14.222222-21.162667 14.222223-35.271111s-4.750222-25.884444-14.222223-35.271111c-9.472-9.415111-21.333333-14.392889-35.555555-14.904889z m227.555555 0c-14.222222 0.512-26.083556 5.489778-35.555555 14.904889-9.472 9.386667-14.222222 21.162667-14.222222 35.271111s4.750222 25.884444 14.222222 35.271111c9.472 9.386667 21.333333 14.108444 35.555555 14.108445s26.083556-4.693333 35.555556-14.108445c9.472-9.386667 14.222222-21.162667 14.222222-35.271111s-4.750222-25.884444-14.222222-35.271111c-9.472-9.415111-21.333333-14.392889-35.555556-14.904889z"
                    fill="#666"
                    p-id="77068"
                  ></path>
                </svg>
              </div>
            </el-tooltip>
            <dict-tag v-else :options="disputes_status" :value="row.disputeStatus" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="收款信息" min-width="120">
        <template #default="{ row }">
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="'轮询组:' + groupList.find((item) => item.groupId == row.groupId)?.groupName || row.groupId"
            placement="top"
          >
            <div class="truncate overflow-hidden max-w-[100%] w-fit">
              {{ groupList.find((item) => item.groupId == row.groupId)?.groupName || row.groupId }}
            </div>
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="'收款平台:' + payList.filter((item) => item.typeId == row.payTypeId)[0]?.name || row.payTypeId"
            placement="top"
          >
            <div class="truncate overflow-hidden max-w-[100%] w-fit">
              {{ payList.filter((item) => item.typeId == row.payTypeId)[0]?.name || row.payTypeId }}
            </div>
          </el-tooltip>
          <div>
            <el-tooltip class="box-item" effect="dark" :content="'收款账号:' + row.accountName" placement="top">
              <el-link class="truncate overflow-hidden max-w-[100%]" :underline="false" @click="copyText(row.accountName, '收款账号')">{{
                row.accountName
              }}</el-link>
            </el-tooltip>
          </div>

          <el-tooltip v-if="row.groupTypeRemark" class="box-item" effect="dark" :content="'收款平台备注:' + row.groupTypeRemark" placement="top">
            <div class="truncate overflow-hidden max-w-[100%] w-fit">
              {{ row.groupTypeRemark }}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column label="来源域名/客户信息" width="160">
        <template #default="{ row }">
          <el-popover placement="left" trigger="hover" :width="260">
            <template #reference>
              <div class="flex flex-col">
                <el-link class="truncate overflow-hidden max-w-[100%]" :underline="false" @click="copyText(row.fromDomain, 'B端订来源域名单号')">{{
                  row.fromDomain
                }}</el-link>
                <el-link
                  v-if="row.shipping?.first_name"
                  class="truncate overflow-hidden max-w-[100%]"
                  :underline="false"
                  @click="copyText(row.shipping.first_name + ' ' + row.shipping.last_name, '姓名')"
                  >{{ row.shipping.first_name + ' ' + row.shipping.last_name }}</el-link
                >
                <el-link
                  v-if="row.shipping"
                  class="truncate overflow-hidden max-w-[100%]"
                  :underline="false"
                  @click="copyText(row.shipping.email, '邮箱')"
                  >{{ row.shipping.email }}</el-link
                >
              </div>
            </template>
            <div class="kh_info flex flex-col w-[100%] gap-1" v-if="row.shipping">
              <span class="text-[#666] text-[14px] font-bold" v-if="Object.keys(row.shipping).length > 0">送货地址信息</span>
              <div
                v-if="row.shipping?.first_name"
                class="text-nowrap truncate break-words"
                @click="copyText(row.shipping.first_name + ' ' + row.shipping.last_name, '姓名')"
              >
                <span>姓名：</span>
                <span>{{ row.shipping.first_name + ' ' + row.shipping.last_name }}</span>
              </div>
              <div v-if="row.shipping.phone" class="text-nowrap truncate break-words" @click="copyText(row.shipping.phone, '电话')">
                <span>电话：</span>
                <span>{{ row.shipping.phone }}</span>
              </div>
              <div v-if="row.shipping.email" class="text-nowrap truncate break-words" @click="copyText(row.shipping.email, '邮箱')">
                <span>邮箱：</span>
                <span>{{ row.shipping.email }}</span>
              </div>
              <div v-if="row.shipping.country" class="text-nowrap truncate break-words" @click="copyText(row.shipping.country, '国家')">
                <span>国家：</span>
                <span>{{ row.shipping.country }}</span>
              </div>
              <div v-if="row.shipping.city" class="text-nowrap truncate break-words" @click="copyText(row.shipping.city, '城市')">
                <span>城市：</span>
                <span>{{ row.shipping.city }}</span>
              </div>
              <div v-if="row.shipping.state" class="text-nowrap truncate break-words" @click="copyText(row.shipping.city, '城市')">
                <span>州：</span>
                <span>{{ row.shipping.state }}</span>
              </div>
              <div v-if="row.shipping.address_1" class="text-nowrap truncate break-words" @click="copyText(row.shipping.address_1, '街道')">
                <span>地址1：</span>
                <span>{{ row.shipping.address_1 }}</span>
              </div>
              <div v-if="row.shipping.postcode" class="text-nowrap truncate break-words" @click="copyText(row.shipping.postcode, '邮编')">
                <span>邮编：</span>
                <span>{{ row.shipping.postcode }}</span>
              </div>

              <div v-if="row.fromDomain" class="text-nowrap truncate break-words" @click="copyText(row.fromDomain, '来源域名')">
                <span>来源域名：</span>
                <span>{{ row.fromDomain }}</span>
              </div>

              <div v-if="row.orderSn" class="text-nowrap truncate break-words" @click="copyText(row.orderSn, '自定义单号')">
                <span>自定义单号：</span>
                <span>{{ row.orderSn }}</span>
              </div>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="付款信息" min-width="140" align="center">
        <template #default="{ row }">
          <div class="w-[100%] text-nowrap flex flex-col gap-1">
            <el-tooltip class="box-item" effect="dark" v-if="row.payMethodType" :content="'付款方式：' + row.payMethodType" placement="top">
              <el-tag class="truncate max-w-[100%]" type="primary">{{ row.payMethodType }}</el-tag>
            </el-tooltip>

            <el-tooltip v-for="item in row.buyerData" class="box-item" effect="dark" :content="item.label + '：' + item.value" placement="top">
              <el-tag class="truncate max-w-[100%]" type="info" v-if="item.value">{{ item.value }}</el-tag>
            </el-tooltip>

            <el-tooltip class="box-item" v-if="row.failMsg" effect="dark" :content="'失败原因：' + row.failMsg" placement="top">
              <el-tag class="truncate max-w-[100%]" type="danger">{{ row.failMsg }}</el-tag>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="风险信息" min-width="140" align="center">
        <template #default="{ row }">
          <div class="flex flex-col gap-1">
            <el-tag type="info" class="cursor-pointer" @click="copyText(row.formIp, '来源IP')">{{ row.formIp }}</el-tag>

            <el-tooltip class="box-item" effect="dark" v-if="row.risk" :content="'风险值：' + row.risk" placement="top">
              <el-tag type="warning" class="truncate max-w-[100%]">风险值：{{ row.risk }}</el-tag>
            </el-tooltip>

            <el-tooltip class="box-item" effect="dark" v-if="row.riskDetail" :content="row.riskDetail" placement="top">
              <el-tag type="danger" class="truncate max-w-[100%] cursor-pointer items-center" style="" @click="copyText(row.riskDetail, '风险信息')"
                >风险信息：{{ row.riskDetail }}</el-tag
              >
            </el-tooltip>
          </div>
        </template>
      </el-table-column>

      <el-table-column v-hasPermi="['admin:order:take']" v-if="shwoEat" label="吃单" prop="" align="center" width="50">
        <template #default="{ row }">
          <div>{{ row.isFeign == 1 ? '是' : '否' }}</div>
        </template>
      </el-table-column>

      <el-table-column label="物流状态" align="center" width="80">
        <template #default="{ row }">
          <div class="relative flex items-center justify-center flex-col gap-1 min-h-[50px]" :class="row.trackRemark ? 'pt-[10px]' : ''">
            <el-tooltip v-if="row.trackRemark" class="box-item" effect="dark" :content="row.trackRemark" placement="right">
              <div class="relative">
                <dict-tag :options="logistics_status" :value="row.trackStatus" />
                <svg
                  t="1729674430243"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="14765"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="22"
                  height="22"
                  style="position: absolute; right: 0; top: 0; transform: translateX(50%) translateY(-50%)"
                  fill="#777"
                >
                  <path
                    d="M113.777778 170.666667h796.444444a56.888889 56.888889 0 0 1 56.888889 56.888889v533.361777a56.888889 56.888889 0 0 1-56.888889 56.888889H427.861333l-185.969777 118.129778a28.444444 28.444444 0 0 1-43.690667-24.007111V817.777778H113.777778a56.888889 56.888889 0 0 1-56.888889-56.888889V227.555556a56.888889 56.888889 0 0 1 56.888889-56.888889z m163.555555 284.444444c-14.222222 0.512-26.083556 5.489778-35.555555 14.904889-9.472 9.386667-14.222222 21.162667-14.222222 35.271111s4.750222 25.884444 14.222222 35.271111c9.472 9.386667 21.333333 14.108444 35.555555 14.108445s26.083556-4.693333 35.555556-14.108445c9.472-9.386667 14.222222-21.162667 14.222222-35.271111s-4.750222-25.884444-14.222222-35.271111c-9.472-9.415111-21.333333-14.392889-35.555556-14.904889z m227.555556 0c-14.222222 0.512-26.083556 5.489778-35.555556 14.904889-9.472 9.386667-14.222222 21.162667-14.222222 35.271111s4.750222 25.884444 14.222222 35.271111c9.472 9.386667 21.333333 14.108444 35.555556 14.108445s26.083556-4.693333 35.555555-14.108445c9.472-9.386667 14.222222-21.162667 14.222223-35.271111s-4.750222-25.884444-14.222223-35.271111c-9.472-9.415111-21.333333-14.392889-35.555555-14.904889z m227.555555 0c-14.222222 0.512-26.083556 5.489778-35.555555 14.904889-9.472 9.386667-14.222222 21.162667-14.222222 35.271111s4.750222 25.884444 14.222222 35.271111c9.472 9.386667 21.333333 14.108444 35.555555 14.108445s26.083556-4.693333 35.555556-14.108445c9.472-9.386667 14.222222-21.162667 14.222222-35.271111s-4.750222-25.884444-14.222222-35.271111c-9.472-9.415111-21.333333-14.392889-35.555556-14.904889z"
                    fill="#666"
                    p-id="77068"
                  ></path>
                </svg>
              </div>
            </el-tooltip>
            <dict-tag v-else :options="logistics_status" :value="row.trackStatus" />
            <el-tooltip v-if="row.trackNo" class="box-item" effect="dark" :content="'物流单号:' + row.trackNo" placement="right">
              <el-tag class="truncate w-[100%]" style="display: block; line-height: 24px">{{ row.trackNo }}</el-tag>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="订单/商品类型" width="110">
        <template #default="{ row }">
          <dict-tag v-if="row.orderType" :options="order_type" :value="row.orderType" />
          <dict-tag v-if="row.goodsType" :options="product_type" :value="row.goodsType" />
        </template>
      </el-table-column>

      <el-table-column label="成功/物流邮件" v-if="!isClient" width="126">
        <template #default="{ row }">
          <div>
            <div v-if="row.payEmail == 1 || row.payEmail == 0">支付邮件:{{ row.payEmail == 1 ? '已发送' : '未发送' }}</div>
            <div v-if="row.trackEmail == 1 || row.trackEmail == 0">物流邮件:{{ row.trackEmail == 1 ? '已发送' : '未发送' }}</div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="创建时间/支付时间" width="160">
        <template #default="{ row }">
          <el-tooltip class="box-item" effect="dark" :content="'创建时间:' + row.createTime" placement="top">
            <div class="truncate">{{ row.createTime }}</div>
          </el-tooltip>
          <el-tooltip class="box-item" effect="dark" :content="'支付时间:' + row.payTime" placement="top">
            <div class="truncate">{{ row.payTime }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="160" fixed="right" class="relative" class-name="small-padding fixed-width">
        <template #default="scope">
          <div class="flex flex-wrap gap-1">
            <el-button style="margin: 0" link type="primary" @click="handleUpdateRemark(scope.row)">编辑备注</el-button>
            <el-button v-hasPermi="['system:PayOrder:edit']" style="margin: 0" link type="primary" @click="handleUpdate(scope.row)"
              >编辑状态</el-button
            >

            <div v-hasPermi="['system:logistical:save']">
              <el-button v-if="scope.row.showLogis && scope.row.status == 2" style="margin: 0" link type="primary" @click="handleLogistics(scope.row)"
                >推送物流</el-button
              >
            </div>

            <el-button v-hasPermi="['pay:payOrder:orderLogs']" link style="margin: 0" type="info" @click="viewOrderLogs(scope.row)"
              >订单日志</el-button
            >
            <el-button style="margin: 0" link type="success" @click="openViewOrder(scope.row)">详情</el-button>
            <el-button v-hasPermi="['system:PayOrder:remove']" style="margin: 0" link type="danger" @click="handleDelete(scope.row)"> 删除</el-button>
          </div>
          <div v-if="showExpand(scope.row)" class="absolute bottom-[-1px] w-[100%] bg-white left-0 h-[1px]"></div>
        </template>
      </el-table-column>
    </el-table>

    <div class="flex justify-end mt-5 mr-[-0.5rem]">
      <div class="flex justify-end items-center w-fit gap-5">
        <pagination
          v-show="total > 0"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          :page-sizes="[20, 50, 100, 300]"
          :total="total"
          style="height: 30px; margin: 0; padding: 0 !important"
          @pagination="getList"
        />
        <right-toolbar v-model:showSearch="showSearch" :show-search-btn="false" @query-table="getList"></right-toolbar>
      </div>
    </div>

    <!-- 添加或修改订单对话框 -->
    <el-dialog v-model="dialog.visible" title="修改订单状态" width="500px" append-to-body>
      <el-form ref="PayOrderFormRef" :model="form" :rules="rules">
        <el-form-item label="状态类型" prop="status">
          <el-select v-model="orderStatusType" placeholder="请选择修改订单状态类型" clearable>
            <el-option label="支付状态" value="1"></el-option>
            <el-option label="退款状态" value="2"></el-option>
            <el-option label="争议状态" value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-if="orderStatusType == 1" label="支付状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :value="1">弃单</el-radio>
            <el-radio :value="2">支付成功</el-radio>
            <el-radio :value="3">支付失败</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="orderStatusType == 1" prop="pushA">
          <el-checkbox v-model="form.pushA" label="是否通知A端" size="large" />
        </div>

        <div v-if="orderStatusType == 2" prop="refundStatus" class="flex gap-2 items-center">
          <span class="font-bold w-fit flex-shrink-0">退款状态:</span>
          <!-- <el-tag type="success">退款成功</el-tag> -->
          <el-select v-model="statusRefund">
            <el-option label="未退款" :value="0"></el-option>
            <el-option label="退款成功" :value="2"></el-option>
          </el-select>
        </div>
        <div v-if="orderStatusType == 2" prop="refundStatus">
          <el-checkbox v-model="form.pushRefund" label="是否通知支付渠道" size="large" />
          <el-form-item v-if="!form.pushRefund && statusRefund == 2" label="退款金额" prop="refundMoney">
            <el-input-number v-model="form.refundMoney" :min="0" :max="form.usdMoney" />
          </el-form-item>
        </div>

        <el-form-item v-if="orderStatusType == 3" label="争议状态" prop="refundStatus">
          <el-select v-model="form.status" placeholder="争议状态" clearable>
            <el-option v-for="dict in disputes_status" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="orderStatusType == 3" label="争议备注" prop="refundStatus">
          <el-input v-model="form.disputeRemark" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="logisDialog" title="推送物流" width="850px" append-to-body>
      <el-form ref="logisOrderFormRef" :model="logisForm" :rules="logisRules" label-width="80px">
        <div v-if="logisticsFormItem" class="form_container">
          <div class="logis_title">物流信息</div>
          <div class="flex flex-wrap gap-x-5 justify-between items-start">
            <el-form-item
              v-for="item in logisticsFormItem"
              :label="item.label"
              :prop="item.value"
              :class="item.label == '物流状态' ? 'w-[100%]' : 'w-[48%]'"
            >
              <el-input v-model="logisForm[item.value]"></el-input>
              <div class="text-[11px] text-[#f56c6c] leading-[1.2] pt-1" style="word-warp: break-word; word-break: break-all">
                <span v-if="item.label == '物流公司代码'">参考网站:https://developer.paypal.com/docs/api/tracking/v1/#trackers-batch_post</span>

                <div class="flex flex-wrap gap-x-2">
                  <el-tag v-if="item.label == '装货方向'" type="danger" class="cursor-pointer" size="small" @click="copyText('FORWARD', '装货方向')"
                    >FORWARD 转发</el-tag
                  >
                  <el-tag v-if="item.label == '装货方向'" type="danger" class="cursor-pointer" size="small" @click="copyText('RETURN', '装货方向')"
                    >RETURN 退回</el-tag
                  >
                </div>

                <div v-if="item.label == '物流状态'" class="flex flex-wrap gap-x-2 gap-y-1">
                  <el-tag type="danger" class="cursor-pointer" size="small" @click="copyText('CANCELLED', '物流状态')">CANCELLED 已取消</el-tag>
                  <el-tag type="danger" class="cursor-pointer" size="small" @click="copyText('DELIVERED', '物流状态')">DELIVERED 已送达</el-tag>
                  <el-tag type="danger" class="cursor-pointer" size="small" @click="copyText('LOCAL_PICKUP', '物流状态')"
                    >LOCAL_PICKUP 本地取件</el-tag
                  >
                  <el-tag type="danger" class="cursor-pointer" size="small" @click="copyText('ON_HOLD', '物流状态')">ON_HOLD 暂停</el-tag>
                  <el-tag type="danger" class="cursor-pointer" size="small" @click="copyText('SHIPPED', '物流状态')">SHIPPED 已发货</el-tag>
                </div>
              </div>
            </el-form-item>
          </div>
        </div>

        <div class="form_container">
          <div class="logis_title">地址信息</div>
          <div class="grid grid-cols-2 gap-5">
            <template v-for="item in logisticsAddressItem">
              <el-form-item v-if="item.label == '国家'" label="国家" prop="country">
                <el-select v-model="logisForm.country" filterable>
                  <el-option v-for="item in sys_country" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                v-else-if="item.label == '地址1'"
                label="地址1"
                :rules="[
                  {
                    required: item.require,
                    message: '请填写' + item.label,
                    trigger: 'blur'
                  }
                ]"
              >
                <el-input v-model="logisForm.address_1" type="textarea"></el-input>
              </el-form-item>
              <el-form-item
                v-else-if="item.label == '地址2'"
                label="地址2"
                :rules="[
                  {
                    required: item.require,
                    message: '请填写' + item.label,
                    trigger: 'blur'
                  }
                ]"
              >
                <el-input v-model="logisForm.address_2" type="textarea"></el-input>
              </el-form-item>
              <el-form-item
                v-else
                :rules="[
                  {
                    required: item.require,
                    message: '请填写' + item.label,
                    trigger: 'blur'
                  }
                ]"
                :label="item.label"
                :prop="item.value"
              >
                <el-input v-model="logisForm[item.value]"></el-input>
              </el-form-item>
            </template>
          </div>
        </div>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitLogisForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
      <el-form ref="PayOrderFormRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="应用ID" prop="appId">
          <el-input v-model="form.appId" placeholder="请输入应用ID" />
        </el-form-item>
        <el-form-item label="支付平台ID" prop="payTypeId">
          <el-input v-model="form.payTypeId" placeholder="请输入支付平台ID" />
        </el-form-item>
        <el-form-item label="订单类型" prop="orderType">
          <el-select v-model="form.orderType" placeholder="请选择订单类型">
            <el-option v-for="dict in order_type" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="A端订单号" prop="orderAid">
          <el-input v-model="form.orderAid" placeholder="请输入A端订单号" />
        </el-form-item>
        <el-form-item label="B端订单号" prop="orderNo">
          <el-input v-model="form.orderNo" placeholder="请输入B端订单号" />
        </el-form-item>
        <el-form-item label="平台订单号" prop="orderCid">
          <el-input v-model="form.orderCid" placeholder="请输入平台订单号" />
        </el-form-item>
        <el-form-item label="订单总金额" prop="orderMoney">
          <el-input v-model="form.orderMoney" placeholder="请输入订单总金额" />
        </el-form-item>
        <el-form-item label="订单美元金额" prop="usdMoney">
          <el-input v-model="form.usdMoney" placeholder="请输入订单美元金额" />
        </el-form-item>
        <el-form-item label="强制货币金额" prop="forceMoney">
          <el-input v-model="form.forceMoney" placeholder="请输入强制货币金额" />
        </el-form-item>
        <el-form-item label="来源域名" prop="fromDomain">
          <el-input v-model="form.fromDomain" placeholder="请输入来源域名" />
        </el-form-item>
        <el-form-item label="来源IP" prop="formIp">
          <el-input v-model="form.formIp" placeholder="请输入来源IP" />
        </el-form-item>
        <el-form-item label="货币类型" prop="currency">
          <el-input v-model="form.currency" placeholder="请输入货币类型" />
        </el-form-item>
        <el-form-item label="强制货币类型" prop="forceCurrency">
          <el-input v-model="form.forceCurrency" placeholder="请输入强制货币类型" />
        </el-form-item>
        <el-form-item label="汇率" prop="rates">
          <el-input v-model="form.rates" placeholder="请输入汇率" />
        </el-form-item>
        <el-form-item label="支付时间" prop="payTime">
          <el-date-picker clearable v-model="form.payTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择支付时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="支付状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio v-for="dict in order_status" :key="dict.value" :value="parseInt(dict.value)">{{ dict.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否吃单" prop="isFeign">
          <el-input v-model="form.isFeign" placeholder="请输入是否吃单" />
        </el-form-item>
        <el-form-item label="退款状态" prop="refundStatus">
          <el-select v-model="form.refundStatus" placeholder="请选择退款状态">
            <el-option v-for="dict in refund_status" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="退款单ID" prop="refundId">
          <el-input v-model="form.refundId" placeholder="请输入退款单ID" />
        </el-form-item>
        <el-form-item label="争议ID" prop="disputeId">
          <el-input v-model="form.disputeId" placeholder="请输入争议ID" />
        </el-form-item>
        <el-form-item label="风险值" prop="risk">
          <el-input v-model="form.risk" placeholder="请输入风险值" />
        </el-form-item>
        <el-form-item label="风险细节" prop="riskDetail">
          <el-input v-model="form.riskDetail" placeholder="请输入风险细节" />
        </el-form-item>
        <el-form-item label="支付方式" prop="payMethod">
          <el-input v-model="form.payMethod" placeholder="请输入支付方式" />
        </el-form-item>
        <el-form-item label="客户姓名" prop="customerName">
          <el-input v-model="form.customerName" placeholder="请输入客户姓名" />
        </el-form-item>
        <el-form-item label="客户电话" prop="customerPhone">
          <el-input v-model="form.customerPhone" placeholder="请输入客户电话" />
        </el-form-item>
        <el-form-item label="客户邮箱" prop="customerEmail">
          <el-input v-model="form.customerEmail" placeholder="请输入客户邮箱" />
        </el-form-item>
        <el-form-item label="客户ip" prop="customerIp">
          <el-input v-model="form.customerIp" placeholder="请输入客户ip" />
        </el-form-item>
        <el-form-item label="手机号国家" prop="phoneCountry">
          <el-input v-model="form.phoneCountry" placeholder="请输入手机号国家" />
        </el-form-item>
        <el-form-item label="ip国家" prop="ipCountry">
          <el-input v-model="form.ipCountry" placeholder="请输入ip国家" />
        </el-form-item>
        <el-form-item label="物流ID" prop="trackId">
          <el-input v-model="form.trackId" placeholder="请输入物流ID" />
        </el-form-item>
        <el-form-item label="session_id" prop="sessionId">
          <el-input v-model="form.sessionId" placeholder="请输入session_id" />
        </el-form-item>
        <el-form-item label="异步回调地址" prop="callbackUrl">
          <el-input v-model="form.callbackUrl" placeholder="请输入异步回调地址" />
        </el-form-item>
        <el-form-item label="成功跳转url" prop="successUrl">
          <el-input v-model="form.successUrl" placeholder="请输入成功跳转url" />
        </el-form-item>
        <el-form-item label="取消跳转url" prop="cancelUrl">
          <el-input v-model="form.cancelUrl" placeholder="请输入取消跳转url" />
        </el-form-item>
        <el-form-item label="失败跳转url" prop="failureUrl">
          <el-input v-model="form.failureUrl" placeholder="请输入失败跳转url" />
        </el-form-item>
        <el-form-item label="备注信息" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注信息" />
        </el-form-item>
        <el-form-item label="收款账号" prop="accountName">
          <el-input v-model="form.accountName" placeholder="请输入收款账号" />
        </el-form-item>
        <el-form-item label="商户名称" prop="clientName">
          <el-input v-model="form.clientName" placeholder="请输入商户名称" />
        </el-form-item>
        <el-form-item label="代理人名称" prop="agentName">
          <el-input v-model="form.agentName" placeholder="请输入代理人名称" />
        </el-form-item>
        <el-form-item v-for="item in payConfig" :label="item.label" :prop="item.value">
          <el-input v-model="form[item.value]" :placeholder="'请输入' + item.label" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime">
          <el-date-picker clearable v-model="form.createTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择创建时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog> -->

    <div v-if="showOrder" class="order_info_dialog" @click="closeOrderInfo">
      <div class="order_container" @click.stop="showOrder = true">
        <el-tabs v-model="orderInfoActive" class="demo-tabs">
          <el-tab-pane label="订单信息" name="orderInfo" :lazy="true">
            <div class="min-h-[60vh] max-h-[60vh] overflow-auto">
              <div class="order_con">
                <div class="order_title">APP信息</div>
                <div class="value_list">
                  <div v-if="isAdmin" v-hasPermi="['pay:payOrder:trader']">
                    <span>代理名称</span>
                    <el-link :underline="false" @click="copyText(orderInfo.agentName, '代理名称')">{{ orderInfo.agentName }}</el-link>
                  </div>
                  <div v-hasPermi="['pay:payOrder:trader']">
                    <span>商户名称</span>
                    <el-link :underline="false" @click="copyText(orderInfo.clientName, '商户名称')">{{ orderInfo.clientName }}</el-link>
                  </div>
                  <div>
                    <span>APPID</span>
                    <el-link :underline="false" @click="copyText(orderInfo.appId, 'appId')">{{ orderInfo.appId }}</el-link>
                  </div>
                  <div>
                    <span>收款平台</span>
                    <el-tag
                      type="primary"
                      class="cursor-pointer"
                      style="color: var(--el-color-primary); line-height: 24px"
                      @click="copyText(orderInfo.payTypeId, '收款平台ID')"
                      >{{ payList.filter((item) => item.typeId == orderInfo.payTypeId)[0]?.name || orderInfo.payTypeId }}</el-tag
                    >
                  </div>
                  <div v-hasPermi="['pay:payOrder:accountName']">
                    <span>收款账号</span>
                    <el-link :underline="false" @click="copyText(orderInfo.accountName, '收款账号')">{{ orderInfo.accountName }}</el-link>
                  </div>
                  <div>
                    <span>来源域名</span>
                    <el-link :href="orderInfo.fromDomain" target="_blank" type="primary">{{ orderInfo.fromDomain }}</el-link>
                  </div>
                </div>
              </div>

              <div class="order_con">
                <div class="order_title">单号信息</div>
                <div class="value_list">
                  <div>
                    <span>A端订单号</span>
                    <el-link :underline="false" @click="copyText(orderInfo.orderAid, 'A端订单号')">{{ orderInfo.orderAid }}</el-link>
                  </div>
                  <div>
                    <span>B端订单号</span>
                    <el-link :underline="false" @click="copyText(orderInfo.orderNo, 'B端订单号')">{{ orderInfo.orderNo }}</el-link>
                  </div>
                  <div>
                    <span>C端订单号</span>
                    <el-link :underline="false" @click="copyText(orderInfo.orderId, 'C端订单号')">{{ orderInfo.orderId }}</el-link>
                  </div>
                  <div>
                    <span>平台订单号</span>
                    <el-link :underline="false" @click="copyText(orderInfo.orderCid, '平台订单号')">{{ orderInfo.orderCid }}</el-link>
                  </div>
                  <div>
                    <span>订单类型</span>
                    <el-link v-if="orderInfo.orderType" :underline="false" @click="copyText(orderInfo.orderType, '订单类型')"
                      ><dict-tag class="cursor-pointer" :options="order_type" :value="orderInfo.orderType"
                    /></el-link>
                  </div>
                </div>
              </div>

              <div class="order_con">
                <div class="order_title">订单金额</div>
                <div class="value_list">
                  <div>
                    <span>A端金额</span>
                    <el-link :underline="false" @click="copyText(orderInfo.orderMoney, 'A端金额')"
                      >{{ orderInfo.currency }} {{ orderInfo.amoney }}</el-link
                    >
                  </div>
                  <div>
                    <span>美元金额</span>
                    <el-link :underline="false" @click="copyText(orderInfo.usdMoney, '美元金额')">USD {{ orderInfo.usdMoney }}</el-link>
                  </div>
                  <div>
                    <span>强转金额</span>
                    <el-link :underline="false" @click="copyText(orderInfo.forceMoney, '强转金额')"
                      >{{ orderInfo.forceCurrency }} {{ orderInfo.forceMoney }}</el-link
                    >
                  </div>
                </div>
              </div>

              <div class="order_con">
                <div class="order_title">订单状态</div>
                <div class="value_list">
                  <div>
                    <span>支付状态</span>
                    <dict-tag
                      v-if="orderInfo.status"
                      class="cursor-pointer"
                      :options="orderStatus"
                      :value="orderInfo.status"
                      @click="copyText(orderInfo.status, '支付状态')"
                    />
                  </div>
                  <div>
                    <span>退款状态</span>
                    <dict-tag
                      v-if="orderInfo.refundStatus"
                      :options="refund_status"
                      :value="orderInfo.refundStatus"
                      class="cursor-pointer"
                      @click="copyText(orderInfo.refundStatus, '退款状态')"
                    />
                  </div>
                  <div>
                    <span>争议状态</span>
                    <el-link :underline="false" @click="copyText(orderInfo.risk, '争议状态')">暂无</el-link>
                  </div>
                </div>
              </div>

              <div class="order_con">
                <div class="order_title">其他</div>
                <div class="value_list">
                  <div v-if="shwoEat" v-hasPermi="['admin:order:take']">
                    <span>是否吃单</span>
                    <el-link :underline="false" @click="copyText(orderInfo.isFeign, '是否吃单')">{{ orderInfo.isFeign ? '是' : '否' }}</el-link>
                  </div>
                  <div>
                    <span>风险值</span>
                    <el-link :underline="false" @click="copyText(orderInfo.risk, '风险值')">{{ orderInfo.risk }}</el-link>
                  </div>
                  <div>
                    <span>风险细节</span>
                    <el-link :underline="false" @click="copyText(orderInfo.riskDetail, '风险细节')">{{ orderInfo.riskDetail }}</el-link>
                  </div>
                </div>
              </div>
            </div>
            <!-- <div class="min-h-[50vh]">
            <el-form>
              <el-form-item label="代理名称">
                <el-input :value="orderInfo.agentName" />
              </el-form-item>
            </el-form>
          </div> -->
          </el-tab-pane>
          <el-tab-pane label="产品信息" name="productInfo" :lazy="true">
            <div class="min-h-[60vh] max-h-[60vh] overflow-auto product_info">
              <el-table :data="orderInfo.product">
                <el-table-column align="center" label="商品名" prop="name">
                  <template #default="{ row }">
                    <a :title="row.name" class="truncate">{{ row.name }}</a>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="单价" prop="price" />
                <el-table-column align="center" label="数量" prop="quantity" />
                <el-table-column align="center" label="总价" prop="subtotal" />
                <el-table-column align="center" label="规格">
                  <template #default="{ row }">
                    <div class="flex flex-col">
                      <template v-if="typeof row.attributes == 'string' || !row.attributes">
                        <span>{{ row.attributes }}</span>
                      </template>
                      <template v-else>
                        <span v-for="item in row.attributes">{{ item?.key }}: {{ item?.value }}</span>
                      </template>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="商品图片" prop="quantity">
                  <template #default="{ row }">
                    <a :href="row.image" target="_black">
                      <el-image
                        style="width: 50px; height: 50px"
                        :src="row.image"
                        :zoom-rate="1.2"
                        :max-scale="7"
                        :min-scale="0.2"
                        :initial-index="1"
                        fit="cover"
                      >
                        <template #error>
                          <div class="image-slot">
                            <el-icon style="font-size: 50px"><Picture /></el-icon>
                          </div>
                        </template>
                      </el-image>
                    </a>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="客户信息" name="userInfo" :lazy="true">
            <div class="min-h-[60vh] max-h-[60vh] relative">
              <el-card header="送货地址信息">
                <div class="user_info">
                  <div>
                    <span>姓名：</span>
                    <el-link :underline="false" @click="copyText(orderInfo.shipping.first_name + orderInfo.shipping.last_name, '客户姓名')"
                      >{{ orderInfo.shipping.first_name }} {{ orderInfo.shipping.last_name }}</el-link
                    >
                  </div>
                  <div>
                    <span>电话：</span>
                    <el-link :underline="false" @click="copyText(orderInfo.shipping.phone, '客户电话')">{{ orderInfo.shipping.phone }}</el-link>
                  </div>
                  <div>
                    <span>邮箱：</span>
                    <el-link :underline="false" @click="copyText(orderInfo.shipping.email, '客户邮箱')">{{ orderInfo.shipping.email }}</el-link>
                  </div>
                  <div>
                    <span>国家：</span>
                    <el-link :underline="false" @click="copyText(orderInfo.shipping.country, '客户国家')">{{ orderInfo.shipping.country }}</el-link>
                  </div>
                  <div>
                    <span>州：</span>
                    <el-link :underline="false" @click="copyText(orderInfo.shipping.state, '州')">{{ orderInfo.shipping.state }}</el-link>
                  </div>
                  <div>
                    <span>城市：</span>
                    <el-link :underline="false" @click="copyText(orderInfo.shipping.city, '城市')">{{ orderInfo.shipping.city }}</el-link>
                  </div>
                  <div>
                    <span>地址1：</span>
                    <el-link :underline="false" @click="copyText(orderInfo.shipping.address_1, '地址1')">{{ orderInfo.shipping.address_1 }}</el-link>
                  </div>
                  <div>
                    <span>地址2：</span>
                    <el-link :underline="false" @click="copyText(orderInfo.shipping.address_2, '地址2')">{{ orderInfo.shipping.address_2 }}</el-link>
                  </div>
                  <div>
                    <span>邮编：</span>
                    <el-link :underline="false" @click="copyText(orderInfo.shipping.postcode, '邮编')">{{ orderInfo.shipping.postcode }}</el-link>
                  </div>
                </div>
              </el-card>
              <el-card header="账单地址信息" style="margin-top: 40px">
                <div class="user_info">
                  <div>
                    <span>姓名：</span>
                    <el-link :underline="false" @click="copyText(orderInfo.customer.first_name + orderInfo.customer.last_name, '客户姓名')"
                      >{{ orderInfo.customer.first_name }} {{ orderInfo.customer.last_name }}</el-link
                    >
                  </div>
                  <div>
                    <span>电话：</span>
                    <el-link :underline="false" @click="copyText(orderInfo.customer.phone, '客户电话')">{{ orderInfo.customer.phone }}</el-link>
                  </div>
                  <div>
                    <span>邮箱：</span>
                    <el-link :underline="false" @click="copyText(orderInfo.customer.email, '客户邮箱')">{{ orderInfo.customer.email }}</el-link>
                  </div>
                  <div>
                    <span>国家：</span>
                    <el-link :underline="false" @click="copyText(orderInfo.customer.country, '客户国家')">{{ orderInfo.customer.country }}</el-link>
                  </div>
                  <div>
                    <span>州：</span>
                    <el-link :underline="false" @click="copyText(orderInfo.customer.state, '州')">{{ orderInfo.customer.state }}</el-link>
                  </div>
                  <div>
                    <span>城市：</span>
                    <el-link :underline="false" @click="copyText(orderInfo.customer.city, '城市')">{{ orderInfo.customer.city }}</el-link>
                  </div>
                  <div>
                    <span>地址1：</span>
                    <el-link :underline="false" @click="copyText(orderInfo.customer.address_1, '地址1')">{{ orderInfo.customer.address_1 }}</el-link>
                  </div>
                  <div>
                    <span>地址2：</span>
                    <el-link :underline="false" @click="copyText(orderInfo.customer.address_2, '地址2')">{{ orderInfo.customer.address_2 }}</el-link>
                  </div>
                  <div>
                    <span>邮编：</span>
                    <el-link :underline="false" @click="copyText(orderInfo.customer.postcode, '邮编')">{{ orderInfo.customer.postcode }}</el-link>
                  </div>
                </div>
              </el-card>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <el-dialog title="导出配置" v-model="exportVisible" width="500">
      <el-form>
        <el-form-item label="是否导出产品" style="align-items: center">
          <el-radio-group v-model="exportForm.exportProduct">
            <el-radio :value="0" size="large">不导出产品</el-radio>
            <el-radio :value="1" size="large">导出产品</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="exportVisible = false">取消</el-button>
        <el-button @click="handleExport" type="primary">保存</el-button>
      </template>
    </el-dialog>

    <!--备注-->
    <el-dialog v-model="bzVisible" title="设置备注" width="500px" append-to-body>
      <el-form ref="PayAppFormRef" class="dialogForm">
        <el-form-item label="备注">
          <el-input v-model="form.remark" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitFormBz">确 定</el-button>
          <el-button @click="bzVisible = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="PayOrder" lang="ts">
import accoutSelect from '@/components/AccountSelect';
import { listPayAccount } from '@/api/pay/PayAccount';
import { unserialize } from 'php-serialize';
import { queryListPayApp } from '@/api/pay/PayApp';
import { getClient } from '@/api/pay/PayApp';
import logisticsInfo from './conponents/logisticsInfo.vue';
import orderLogs from './conponents/orderLogs.vue';
import { listPayGroup } from '@/api/pay/PayGroup';
import {
  listPayOrder,
  getPayOrder,
  delPayOrder,
  addPayOrder,
  listCount,
  syncESData,
  updatePayOrder,
  updateOrderStatus,
  updatePayOrderRemark
} from '@/api/pay/PayOrder';
import { PayOrderVO, PayOrderQuery, PayOrderForm } from '@/api/pay/PayOrder/types';
import { selecTypetList } from '@/api/pay/PayType/index';
import { copyTextToClipboard } from '@/directive/common/copyText';
import { trackPush } from '@/api/pay/PayOrder';
import usePayType from '@/hooks/usePayType';
import useUserStore from '@/store/modules/user';
const isClient = computed(() => {
  return useUserStore().isClient;
});
const isAdmin = computed(() => {
  return useUserStore().isAdmin;
});
const isAgent = computed(() => {
  return useUserStore().isAgent;
});
const isSupplier = computed(() => {
  return useUserStore().isSupplier;
});
const shwoEat = computed(() => {
  return !useUserStore().isClient && useUserStore().isFeign;
});
const showExpandReason = reactive(['remark']);
const showExpand = (row) => {
  if (row) {
    let arr = showExpandReason.filter((item) => {
      return row[item];
    });
    return arr.length > 0;
  } else {
    return false;
  }
};
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { refund_status, order_status, order_type, product_type, disputes_status, logistics_status, sys_country } = toRefs<any>(
  proxy?.useDict('refund_status', 'order_status', 'order_type', 'product_type', 'disputes_status', 'logistics_status', 'sys_country')
);
const orderStatus = computed(() => {
  let arr = [];
  if (isClient.value) {
    arr = order_status.value.filter((item) => item.value != 0);
  } else {
    arr = order_status.value;
  }
  return arr;
});
const PayOrderList = ref<PayOrderVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(false);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const dateRangeCreateTime = ref<[DateModelType, DateModelType]>(['', '']);
const dateRangeUpdateTime = ref<[DateModelType, DateModelType]>(['', '']);

const queryFormRef = ref<ElFormInstance>();
const PayOrderFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const initFormData: PayOrderForm = {
  orderId: undefined,
  appId: undefined,
  payTypeId: undefined,
  orderType: undefined,
  orderAid: undefined,
  orderNo: undefined,
  orderCid: undefined,
  orderMoney: undefined,
  usdMoney: undefined,
  forceMoney: undefined,
  fromDomain: undefined,
  formIp: undefined,
  currency: undefined,
  forceCurrency: undefined,
  rates: undefined,
  payTime: undefined,
  status: undefined,
  isFeign: undefined,
  refundStatus: undefined,
  refundId: undefined,
  disputeId: undefined,
  risk: undefined,
  riskDetail: undefined,
  goodsType: undefined,
  payMethod: undefined,
  customerName: undefined,
  customerPhone: undefined,
  customerEmail: undefined,
  customerIp: undefined,
  phoneCountry: undefined,
  ipCountry: undefined,
  trackId: undefined,
  sessionId: undefined,
  callbackUrl: undefined,
  successUrl: undefined,
  cancelUrl: undefined,
  failureUrl: undefined,
  remark: undefined,
  accountName: undefined,
  clientName: undefined,
  agentName: undefined,
  createTime: undefined,
  logisticsStatus: undefined
};
const data = reactive<PageData<PayOrderForm, PayOrderQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 20,
    groupIdsCopy: [],
    orderId: undefined,
    appId: undefined,
    payTypeId: undefined,
    orderType: undefined,
    orderAid: undefined,
    orderNo: undefined,
    orderCid: undefined,
    fromDomain: undefined,
    formIp: undefined,
    currency: undefined,
    forceCurrency: undefined,
    payTime: undefined,
    status: undefined,
    isFeign: undefined,
    refundStatus: undefined,
    refundId: undefined,
    disputeId: undefined,
    disputeStatus: undefined,
    risk: undefined,
    riskDetail: undefined,
    goodsType: undefined,
    payMethod: undefined,
    customerName: undefined,
    customerPhone: undefined,
    customerEmail: undefined,
    customerIp: undefined,
    phoneCountry: undefined,
    ipCountry: undefined,
    trackId: undefined,
    sessionId: undefined,
    callbackUrl: undefined,
    successUrl: undefined,
    cancelUrl: undefined,
    failureUrl: undefined,
    accountName: undefined,
    clientName: undefined,
    agentName: undefined,
    params: {
      createTime: undefined
    }
  },
  rules: {}
});

const { queryParams, form, rules } = toRefs(data);

/** 查询订单列表 */
const getList = async () => {
  loading.value = true;
  proxy?.addDateRange(queryParams.value, dateRangeCreateTime.value, 'CreateTime');
  proxy?.addDateRange(queryParams.value, dateRangeUpdateTime.value, 'PayTime');
  queryParams.value.groupIds = queryParams.value.groupIdsCopy.join(',');
  const res = await listPayOrder(queryParams.value);
  PayOrderList.value = res.rows.map((item) => {
    item.showLogis = getShowLogis(item);
    if (isJSON(item.product)) {
      item.product = JSON.parse(item.product);
      item.product.map((item2) => {
        try {
          let obj = [];
          item2.attributes ? (obj = unserialize(item2.attributes)) : '';
          item2.attributes = [];
          for (const key in obj) {
            item2.attributes.push({ key: key, value: obj[key] });
          }
          return item2;
        } catch (error) {
          return item2;
        }
      });
    } else {
      item.product = [];
    }
    if (isJSON(item.customer)) {
      item.customer = JSON.parse(item.customer);
    } else {
      item.customer = {};
    }

    if (isJSON(item.shipping)) {
      item.shipping = JSON.parse(item.shipping);
    } else {
      item.customer = {};
    }
    if (isJSON(item.buyer)) {
      item.buyer = JSON.parse(item.buyer);
      item.buyerData = [];
      for (const key in item.buyer) {
        if (key != 'buyer_id') {
          item.buyerData.push({ label: key, value: item.buyer[key] });
        }
      }
    } else {
      item.buyer = {};
    }

    return item;
  });
  total.value = res.total;
  loading.value = false;
};

/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
  logisDialog.value = false;
};

/** 表单重置 */
const reset = () => {
  logisOrderFormRef.value?.resetFields();
  orderStatusType.value = '';
  form.value = { ...initFormData };
  PayOrderFormRef.value?.resetFields();
};

const customAccountIds = ref([]);
/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  queryParams.value.accountIds = customAccountIds.value.join(',');
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  dateRangeCreateTime.value = ['', ''];
  dateRangeUpdateTime.value = ['', ''];
  queryParams.value.params = {};
  queryFormRef.value?.resetFields();
  customAccountIds.value = [];
  handleQuery();
};

/** 多选框选中数据 */
const handleSelectionChange = (selection: PayOrderVO[]) => {
  ids.value = selection.map((item) => item.orderId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
};

/** 新增按钮操作 */
const handleAdd = () => {
  reset();
  dialog.visible = true;
  dialog.title = '添加订单';
};

/** 修改按钮操作 */
const handleUpdate = async (row?: PayOrderVO) => {
  reset();
  const _orderId = row?.orderId || ids.value[0];
  const res = await getPayOrder(_orderId);
  Object.assign(form.value, res.data);
  dialog.visible = true;
  dialog.title = '修改订单';
  form.value.pushRefund = form.value.pushRefund ? form.value.pushRefund : true;
  form.value.pushA = form.value.pushA ? form.value.pushA : true;
  form.value.pushA = form.value.pushA ? form.value.pushA : true;
  form.value.refundMoney = form.value.usdMoney;
  statusRefund.value = form.value.refundStatus;
};
const statusRefund = ref('');
/** 提交按钮 */
const submitForm = () => {
  PayOrderFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      const data = {
        orderId: form.value.orderId,
        type: orderStatusType.value,
        status: orderStatusType.value == 2 ? 2 : form.value.status
      };

      if (data.type == '1') {
        data.pushA = form.value.pushA;
      }
      if (data.type == '2') {
        data.pushRefund = form.value.pushRefund;
        data.status = statusRefund.value;
        data.refundMoney = form.value.refundMoney;
      }

      if (data.type == '3') {
        data.disputeRemark = form.value.disputeRemark;
      }

      buttonLoading.value = true;
      await updateOrderStatus(data)
        .finally(() => (buttonLoading.value = false))
        .then(async () => {
          proxy?.$modal.msgSuccess('操作成功');
          dialog.visible = false;
          logisDialog.value = false;
          buttonLoading.value = false;
          await getList();
        });
    }
  });
};

/** 删除按钮操作 */
const handleDelete = async (row?: PayOrderVO) => {
  const _orderIds = row?.orderId || ids.value;
  await proxy?.$modal.confirm('是否确认删除订单ID为 ' + _orderIds + ' 的数据项？').finally(() => (loading.value = false));
  await delPayOrder(_orderIds);
  proxy?.$modal.msgSuccess('删除成功');
  await getList();
};

const exportForm = reactive({
  exportProduct: 0
});
const exportVisible = ref(false);
const openExport = () => {
  if (isSupplier.value) {
    exportForm.exportProduct = 0;
    handleExport();
  } else {
    exportVisible.value = true;
  }
};
/** 导出按钮操作 */
const handleExport = () => {
  proxy?.download(
    'system/PayOrder/export',
    {
      ...exportForm,
      ...queryParams.value
    },
    `PayOrder_${new Date().getTime()}.xlsx`
  );
  exportVisible.value = false;
  exportForm.exportProduct = 0;
};

/**获取支付平台 */
const payList = ref([]);
const payConfig = ref([]);
const getPayList = async () => {
  let res = await selecTypetList();
  payList.value = res.data;
};
/**切换支付平台 */
const changePayType = () => {
  if (queryParams.value.payTypeId) {
    let config = payList.value.find((item) => item.typeId == queryParams.value.payTypeId)?.config.replace(/\/\/\*\*\*.*\*\*\*.*\n/g, '');
    if (isJSON(config)) {
      payConfig.value = JSON.parse(config).orderConfig;
    } else {
      payConfig.value = [];
    }
  }
  getList();
};

function isJSON(str) {
  if (typeof str == 'string') {
    try {
      var obj = JSON.parse(str);
      if (typeof obj == 'object' && obj) {
        return true;
      } else {
        return false;
      }
    } catch (e) {
      return false;
    }
  }
}

// 复制成功
const copyText = (str: string, msg: string) => {
  if (!str) return;
  let newStr = str + '';
  let res = copyTextToClipboard(newStr);
  if (res) {
    ElMessage.success(msg + '复制成功');
  }
};

// 编辑物流状态
const logisticsFormItem = ref([]);
const logisticsAddressItem = ref([]);
const logisDialog = ref(false);
const handleLogistics = async (row) => {
  reset();
  logisDialog.value = true;
  logisticsFormItem.value = row.logisticsConfig.logistItem;
  logisticsAddressItem.value = row.logisticsConfig.addressItem;
  logisForm.value.orderNo = row.orderNo;

  logisticsFormItem.value?.map((item) => {
    if (item.require == true || item.require == 'true') {
      if (!logisRules.value[item.value]) {
        logisRules.value[item.value] = [{ required: true, message: '请填写' + item.label, trigger: 'blur' }];
      }
    }
  });
  Object.assign(logisForm.value, row.customer);
  if (isJSON(row.trackInfo)) {
    Object.assign(logisForm.value, JSON.parse(row.trackInfo)?.trackers);
    Object.assign(logisForm.value, JSON.parse(row.trackInfo)?.address);
  }
};

const logisRules = ref({});
// 查看支付方式的配置
const getShowLogis = (row) => {
  let config = payList.value.find((item) => item.typeId == row.payTypeId)?.config.replace(/\/\/\*\*\*.*\*\*\*.*\n/g, '');
  if (isJSON(config)) {
    let logisticsConfig = JSON.parse(config).logisticsConfig;
    row.logisticsConfig = logisticsConfig;
    if (logisticsConfig?.show == false || logisticsConfig?.show == 'false') {
      return false;
    } else {
      return true;
    }
  } else {
    return true;
  }
};
const logisOrderFormRef = ref(null);
const logisForm = ref({});
const submitLogisForm = () => {
  logisOrderFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      let opt = [logisForm.value];
      let res = await trackPush(opt);
      ElMessage.success(res.msg);
      dialog.visible = false;
      logisDialog.value = false;
      buttonLoading.value = false;
      await getList();
    }
  });
};

// 查看订单日志
const viewOrderLogs = (row) => {
  window.open('/orderLogs?orderId=' + row.orderId);
};

//显示更多搜索
const showMore = ref(false);
const searchIcon = ref();
const orderStatusType = ref('');

// 订单详情
const orderInfoActive = ref('orderInfo');
const showOrder = ref(false);
const orderInfo = ref<PayOrderForm>({});
const openViewOrder = (row) => {
  orderInfo.value = row;
  showOrder.value = true;
};
const closeOrderInfo = () => {
  showOrder.value = false;
  orderInfoActive.value = 'orderInfo';
};

// 同步es数据
const handleAync = () => {
  ElMessageBox.prompt('', 'Tip', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel'
  })
    .then(({ value }) => {
      let str = value ? value : '';
      syncESData(str).then((res) => {
        ElMessage({
          type: 'success',
          message: '同步成功'
        });
      });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Input canceled'
      });
    });
};

const appList = ref([]);
const getAppList = async () => {
  if (!isSupplier.value) {
    let res = await queryListPayApp({ pageSize: 200, pageNum: 1 });
    appList.value = res.data;
  }
};

//获取商户列表
const clientList = ref([]);
const managerList = ref([]);
const getClientList = async () => {
  if (!isClient.value && !isSupplier.value) {
    let res = await getClient({ roleKey: 'client' });
    clientList.value = res.data;
  }
};
const getManagerList = async () => {
  if (!isClient.value && !isSupplier.value) {
    let res = await getClient({ roleKey: 'manager' });
    managerList.value = res.data;
  }
};

//获取轮询组列表
const groupList = ref([]);
const getGroupList = async () => {
  let res = await listPayGroup({ pageNum: 1, pageSize: 2000 });
  groupList.value = res.rows;
};

const orderStatisticians = ref({});
// 查询订单统计
const isStaticShow = ref(false);
const getOrderStatisticians = async () => {
  let res = await listCount(queryParams.value);
  orderStatisticians.value = res.data;
  isStaticShow.value = true;
};

//收款账号

const accountList = ref([]);
const getAccount = () => {
  if (!isClient.value) {
    listPayAccount({ pageSize: 2000, pageNum: 1 }).then((res) => {
      accountList.value = res.rows;
    });
  }
};

// 表格是否高斯模糊
const rowClassName = ({ row }) => {
  if (row.hide == 1) {
    return 'custom_hang';
  }
};

// 修改备注
const handleUpdateRemark = (row) => {
  Object.assign(form.value, row);
  bzVisible.value = true;
};
const bzVisible = ref(false);
const submitFormBz = () => {
  buttonLoading.value = true;
  updatePayOrderRemark({ orderId: form.value.orderId, remark: form.value.remark })
    .then((res) => {
      bzVisible.value = false;
      getList();
      buttonLoading.value = false;
      ElMessage.success('配置成功');
    })
    .finally(() => (buttonLoading.value = false));
};

onMounted(async () => {
  await getPayList();
  getList();
  searchIcon.value.classList.add('init');
  getAppList();
  getClientList();
  getGroupList();
  getManagerList();
  // getAccount();
});
</script>

<style lang="scss" scoped>
:deep(.el-form-item__label) {
  min-width: fit-content;
}

.kh_info {
  > div {
    display: flex;
    justify-content: space-between;
    padding: 4px 10px;
    cursor: pointer;
    &:hover {
      background-color: rgba(0, 0, 0, 0.05);
    }
    * {
      width: fit-content;
    }
  }
}

:deep(.el-link) {
  display: inline-block;
  .el-link__inner {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.logis_title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #444;
  position: relative;
  width: fit-content;
  &:after {
    position: absolute;
    bottom: -2px;
    left: 0;
    content: '';
    width: 50%;
    height: 4px;
    background-color: #707070;
    border-radius: 4px;
    transition: 1s;
  }
}
.form_container {
  &:hover {
    .logis_title:after {
      width: 100%;
      transition: 1s;
    }
  }
}
.order_con {
  .order_title {
    font-size: 18px;
    color: #333;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 30px;
  }
  &:nth-child(1) {
    .order_title {
      margin-top: 0;
    }
  }
  .value_list {
    display: flex;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    flex-wrap: wrap;
    row-gap: 10px;
    > div {
      min-width: 33%;
    }
    div {
      display: flex;
      column-gap: 2px;
      align-items: center;
      line-height: 1.5;
      flex-wrap: nowrap;
      text-wrap: nowrap;
      span {
        color: #777;
        font-size: 15px;
        &:nth-child(1) {
          font-weight: bold;
          &:after {
            content: '：';
          }
        }
      }
      :deep(.el-link__inner) {
        font-size: 15px;
        color: #777;
        &:hover {
          color: var(--el-color-primary);
        }
      }
    }
  }
}
.order_info_dialog {
  width: 100%;
  min-height: 100vh;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  .order_container {
    width: 1200px;
    background-color: rgba(255, 255, 255, 1);
    padding: 40px;
    backdrop-filter: blur(5px);
    border-radius: 20px;
    box-shadow: 0px 0px 40px 4px rgba(0, 0, 0, 0.1);
    max-height: 80vh;
    overflow: auto;
  }
}
:deep(.el-tabs__item) {
  font-size: 17px;
}
:deep(.product_info .el-card__body) {
  padding: 0 !important;
}
.user_info {
  display: flex;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  flex-wrap: wrap;
  row-gap: 20px;
  flex-wrap: wrap;
  column-gap: 10px;
  > div {
    min-width: calc(33% - 10px);
    display: flex;
    column-gap: 2px;
    align-items: center;
    line-height: 1.5;
    flex-wrap: nowrap;
    text-wrap: nowrap;
    span {
      color: #333;
      font-size: 17px;
      &:nth-child(1) {
        font-weight: bold;
        width: 50px;
      }
    }
    :deep(.el-link__inner) {
      font-size: 16px;
      color: #777;
      &:hover {
        color: var(--el-color-primary);
      }
    }
  }
}

:deep(.el-tag__content) {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:deep(.el-table__inner-wrapper:before) {
  z-index: 0;
}

:deep(.custom_hang) * {
  color: #b5b5b5 !important;
}

:deep(.el-table__expand-column) {
  width: 1px;
  .el-table__expand-icon {
    display: none;
  }
}

:deep(.el-table__expanded-cell) {
  padding: 0 !important;
  border-bottom: none !important;
}
</style>
